<template>
  <div class="my-header">
    <div class="time">
      {{dateFormat(nowTime)}}
    </div>
    <div class="title">
      {{title}}
    </div>
    <div class="time">
      {{count_down}}
    </div>
  </div>

</template>

<script>
export default {
  name: "myheader",
  data() {
    return {
      title: "考研大数据分析",
      count_down: "",
      nowTime: ""
    }
  },
  mounted() {
    this.countTime();
  },
  // 销毁时清除计时器
  // beforeDestroy: function () {
  // beforeUnmount: function () {
  //   if (this.timer) {
  //     clearInterval(this.timer)
  //   }
  // },
  methods: {
    countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var endDate = new Date("2022-12-25 00:00:00");
      var end = endDate.getTime();
      //时间差
      var leftTime = end - now;
      //定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        this.m = Math.floor(leftTime / 1000 / 60 % 60);
        this.s = Math.floor(leftTime / 1000 % 60);
      }
      // console.log(this.s);
      this.count_down = `${this.d}天${this.h}小时${this.m}分钟${this.s}秒`
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime, 1000);
    },
    // 时间格式化
    dateFormat() {
      var date = new Date()
      var year = date.getFullYear()
      //
      //  在日期格式中，月份是从0开始的
      //   使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      //
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let week = date.getDay() // 星期
      let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // 拼接 时间格式处理
      return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
    }
  }
}
</script>

<style scoped>

</style>
